<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
//引入相关样式
import '@vue-office/docx/lib/index.css'
import { getInformationEtc } from '@/api/realName'
import { useAppStore } from '@/store/modules/app'

const appStore = useAppStore()

const userInfo = ref(appStore.getUserInfo)
const { push, back } = useRouter()
const route = useRoute()
const onBack = () => {
  back()
}
const loading = ref(true)

const pdfUrl = ref('')
const docInfo = ref<any>()
pdfUrl.value = route.query.docFileUrl as string
const init = () => {
  userInfo.value = appStore.getUserInfo

  getInformationEtc({
    username: userInfo.username,
    type: '1'
  }).then((res: any) => {
    console.log(res)
    if (res.statusCode == 201) {
      pdfUrl.value = res.data
    } else {
      docInfo.value = res.data
    }
  })
}
init()
</script>

<template>
  <van-nav-bar title="展业承诺书" fixed placeholder left-arrow @click-left="onBack"> </van-nav-bar>
  <div class="documentBox">
    <VueOfficePdf :src="pdfUrl" v-if="pdfUrl" />
    <div class="documentWrapper" v-else v-html="docInfo"></div>
  </div>
</template>

<style scoped lang="less">
.btnBox {
  padding: 4px 16px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
}
.documentBox {
  width: 100vw;
  padding: 16px;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #fff;
  padding-bottom: 110px;
  .confirmBox {
    position: fixed;
    padding: 16px;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #fff;
  }
}
.documentWrapper {
  width: 100%;
}
</style>
